import popupInfo from "../../components/popupInfo.js";
import squareButton from "../../components/squareButton.js";
import {ResultCode} from "../../network.js";
import {doSave, exist} from "../../utils.js";

export default {
    components: {
        'popup-info': popupInfo,
        'square-button': squareButton
    },
    props: {
        id: String
    },
    setup(props) {
        const popup = Vue.ref(null);
        const router = VueRouter.useRouter();
        const testCase = {appointmentDay: '2022-04-04', departmentName: '神经内科'};
        const caseInfoList = Vue.ref([]);
        const selectedCaseIndex = Vue.ref(0);
        const selectedCase = Vue.computed({
            get() {
                let r = caseInfoList.value[selectedCaseIndex.value];
                if (!exist(r)) {
                    return {};
                }
                return r;
            }
        });

        function getCaseStyle(index) {
            if (index === selectedCaseIndex.value) {
                return {
                    'background': 'rgb(125, 183, 203)',
                    'border-radius': '15px',
                }
            }
            return {};
        }

        function onExitClick() {
            router.go(-1);
        }

        function onCaseClick(index) {
            selectedCaseIndex.value = index;
        }

        const allInsPrice = Vue.computed({
            get() {
                let r = caseInfoList.value[selectedCaseIndex.value];
                if (!exist(r)) {
                    return 0;
                }
                let c = 0;
                for (let ins of r['inspections']) {
                    c += ins['price'];
                }
                return c;
            },
        });

        const allMdcPrice = Vue.computed({
            get() {
                let r = caseInfoList.value[selectedCaseIndex.value];
                if (!exist(r)) {
                    return 0;
                }
                let c = 0;
                for (let ins of r['medicines']) {
                    c += ins['price'] * ins['count'];
                }
                return c;
            },
        });

        Vue.onMounted(() => {
            axios.post("/case/all", {value: props.id})
                .then(r => {
                    if ((r.data.code & ResultCode.FAIL) === ResultCode.FAIL) {
                        popup.value.onConfirm = onExitClick;
                        popup.value.show(r.data.message);
                    }
                    console.log(r);
                    caseInfoList.value = r.data.data;
                })
            ;
        })

        function innerTo(ele) {
            // console.log(captureDom.value.scrollTop);
            // console.log(captureDom.value.offsetTop);
            // console.log(captureDom);
            // console.log(ele.scrollTop);
            // console.log(ele.offsetTop);
            captureDom.value.scrollTop = ele.offsetTop - 44;
        }

        const captureDom = Vue.ref(null);
        const lastModifyTimeDom = Vue.ref(null);
        const medicinesDom = Vue.ref(null);
        const inspectionsDom = Vue.ref(null);
        const doctorOrderDom = Vue.ref(null);
        const patientStatementDom = Vue.ref(null);
        const doctorNameDom = Vue.ref(null);
        const userDom = Vue.ref(null);
        const hospitalNameDom = Vue.ref(null);

        function saveImage() {
            // console.log(captureDom.value.scrollHeight);
            html2canvas(captureDom.value, {
                windowWidth: captureDom.value.width,
                windowHeight: captureDom.value.scrollHeight + 100
            }).then(doSave(selectedCase.value['id']));
        }

        function onPrintCaseClick() {
            saveImage();
        }

        return {
            router, caseInfoList, getCaseStyle,
            onExitClick, popup, selectedCase, onCaseClick,
            allInsPrice, allMdcPrice, captureDom, innerTo,
            lastModifyTimeDom, medicinesDom, inspectionsDom,
            doctorOrderDom, patientStatementDom, doctorNameDom, userDom,
            hospitalNameDom, onPrintCaseClick
        }
    },
    template: `
<div class="container-fluid" style="height: 100%;">
    <popup-info ref="popup"></popup-info>
    <square-button background-url="/images/exit_images/exit2.svg"
                   :height=30
                   left="15px"
                   bottom="15px"
                   @onClick="onExitClick"
    ></square-button>
    <div class="row nss-font" style="height: 100%;">
        <div class="col-md-5" style="height: 100%; max-height: 100%; border-right: 1px solid;">
            <div class="row"
                 style="height: 100%; transform: translateY(-60px); padding-top: 60px; border-bottom: 1px solid;">
                <div class="col-md-8"
                     style="background: linear-gradient(rgba(238,247,249,1) 0%,rgba(255,255,255,1) 100%);
                      padding-left: 0; padding-right: 0;height: 100%;">
                    <div style="text-align: center; font-size: 30px; padding-top: 20px; padding-bottom: 20px;"
                         class="my-font">
                        全部病历
                    </div>
                   <div style="overflow-y: scroll;margin-bottom: 0;height: 90%;
                        overflow-x: hidden;">
                        <div v-for="(item, index) in caseInfoList"
                            @click="onCaseClick(index)"
                            :style="getCaseStyle(index)"
                            class="row" style="font-size: 20px; padding: 10px 15px;
                            cursor: pointer;margin: 0 15px;">
                            <div style="text-align: center;" class="col-md-7">
                                {{item.appointmentTime}}
                            </div>
                            <div style="text-align: center;" class="col-md-5">
                                {{item.departmentName}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" style="padding-left: 0; padding-right: 0;">
                    <div style="padding-top: 20px; padding-bottom: 20px; font-size: 30px;" class="my-font">
                        记录信息
                    </div>
                    <div style="overflow-y: auto; height: 100%; padding-top: 85px; margin-left: 30%; transform: translateY(-85px); max-height: 100%;">
                        <div style="border-left: 1px solid; border-bottom: 1px solid; margin-right: 30px; 
                        font-size: 22px; text-align: left; padding-left: 20px; padding-top: 10px; 
                        padding-bottom: 10px;cursor: pointer;" @click="innerTo(lastModifyTimeDom)">
                            录入时间
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(hospitalNameDom)">
                            就诊医院
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(doctorNameDom)">
                            接诊医生
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(userDom)">
                            个人信息
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(patientStatementDom)">
                            患者陈述
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(doctorOrderDom)">
                            医嘱
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(inspectionsDom)">
                            检查项目
                        </div>
                        <div style="border-left: 1px solid; border-bottom: 1px solid;
                         margin-right: 30px; font-size: 22px; text-align: left;
                          padding-left: 20px; padding-top: 10px; padding-bottom: 10px;
                          cursor: pointer;" @click="innerTo(medicinesDom)">
                            处方信息
                        </div>
                    </div>
                </div>
            </div>
            <div style="height: 60px; transform: translateY(-60px);" class="nss-font">
                <div style="float: right;font-size: 20px;margin-top: 12px;
                    border: 1px solid;border-radius: 10px;background: rgb(234, 245, 246);
                    padding: 3px;cursor: pointer;" @click="onPrintCaseClick">
                    打印信息
                </div>
            </div>
        </div>
        <div class="col-md-7" style="height: 100%; max-height: 100%; padding: 40px 20px;">
            <div style="width: 100%; height: 100%; border: 1px solid;
                overflow-y: auto;margin-bottom: 30px;" ref="captureDom">
                <div style="text-align: center; font-size: 30px; padding-top: 30px; padding-bottom: 30px;"
                    class="my-font">
                    病历记录
                </div>
                <div style="padding-left: 50px; font-size: 20px;" ref="lastModifyTimeDom">
<!--                    {{selectedCase}}-->
                    病历号：{{selectedCase.id}}
                </div>
                <div style="padding-left: 50px; font-size: 20px;" ref="lastModifyTimeDom">
<!--                    {{selectedCase}}-->
                    录入时间：{{selectedCase.lastModifyTime}}
                </div>
                <div style="padding-left: 50px; font-size: 20px;" ref="hospitalNameDom">
                    就诊医院：{{selectedCase.hospitalName}}
                </div>
                <div style="padding-left: 50px; font-size: 20px;" ref="doctorNameDom">
                    接诊医生：{{selectedCase.doctorName}}
                </div>
                <div style="margin-left: 30px;margin-right: 30px;
                    border: 1px solid;font-size: 20px;margin-top: 20px;
                    padding: 10px 20px;" ref="userDom">
                    个人信息<br>
                    姓名:{{selectedCase.userName}}<br>
                    性别:{{selectedCase.userGender ? "男" : "女"}}<br>
                    家庭住址:{{selectedCase.userAddress}}
                </div>
                <div style="margin-left: 30px;margin-right: 30px;
                    border: 1px solid;font-size: 20px;margin-top: 20px;
                    padding: 10px 20px;" ref="patientStatementDom">
                    患者陈述:<br>{{selectedCase.patientStatement}}
                </div>
                <div style="margin-left: 30px;margin-right: 30px;
                    border: 1px solid;font-size: 20px;margin-top: 20px;
                    padding: 10px 20px;" ref="doctorOrderDom">
                    医嘱:<br>{{selectedCase.doctorOrder}}
                </div>
                <div style="margin-left: 30px;margin-right: 30px;
                    border: 1px solid;font-size: 20px;margin-top: 20px;
                    padding: 10px 20px;" ref="inspectionsDom">
                    检查项目:
                    <table class="table my-table" style="text-align: center;width: 100%;margin-bottom: 0;">
                        <tr><td>名称</td><td>价格(元)</td></tr>
                        <tr v-for="(item, index) in selectedCase.inspections">
                            <td>{{item.name}}</td><td>{{item.price}}</td>
                        </tr>
                        <tr>
                            <td>合计</td><td>{{allInsPrice}}</td>
                        </tr>
                    </table>
                </div>
                <div style="margin-left: 30px;margin-right: 30px;
                    border: 1px solid;font-size: 20px;margin-top: 20px;
                    padding: 10px 20px;" ref="medicinesDom">
                    处方信息:
                    <table class="table my-table" style="text-align: center;width: 100%;margin-bottom: 0;">
                        <tr><td>名称</td><td>数量</td><td>单价(元)</td><td>总价(元)</td></tr>
                        <tr v-for="(item, index) in selectedCase.medicines">
                            <td>{{item.name}}</td><td>{{item.count}}</td>
                            <td>{{item.price}}</td><td>{{item.price * item.count}}</td>
                        </tr>
                        <tr>
                            <td>合计(元)</td><td colspan="3">{{allMdcPrice}}</td>
                        </tr>
                    </table>
                </div>
                <div style="height: 30px;">&nbsp;</div>
            </div>
        </div>
    </div>
</div>
<component is="style">
    @import "../../css/table.css";
</component>`,

}